<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>stacktable.js</title>
  <link href="css/style.css" rel="stylesheet" />
  <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
  <link href="stacktable.css" rel="stylesheet" />
</head>
<body>


<div id="wrapper">
  <header>
    <h1><img src="stacktable.png" class="logo" />stacktable.js</h1>
    <h3>jQuery plugin for stacking tables on small screens</h3>
    <div id="author">
      <div class="follow-btn">
        <iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1347293944835&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=johnpolacek&amp;show_count=false&amp;show_screen_name=true&amp;size=l" class="twitter-follow-button" style="width: 169px; height: 28px;" title="Twitter Follow Button" data-twttr-rendered="true"></iframe> 
      </div>
      <p>Created by <a href="https://twitter.com/johnpolacek" target="_blank">John Polacek</a></p>
    </div>
  </header>

  <a href="https://github.com/johnpolacek/stacktable.js/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

  <p>The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted into a 2-column key/value format.</p>

  <h2>Download</h2>
  <p>Source files <a href="https://github.com/johnpolacek/stacktable.js/" target="_blank">on github</a> or <a href="https://github.com/johnpolacek/stacktable.js/zipball/master/" target="_blank">download the zip</a>.</p>

  <h2>How to Use</h2>
  
  <p>Call the plugin on a table.</p>

  <h2>Simple Example <a id="run" href="#">run »</a></h2>
  <pre>$('#simple-example-table').stacktable();</pre>

  <table id="simple-example-table" cellspacing="0">
    <tbody>
      <tr align="left">
        <th width="30%">Stuff</th>
        <th width="12%">Rate</th>
        <th width="12%">Amount</th>
        <th width="12%">Points</th>
        <th width="12%">Number</th>
        <th width="18%">Type</th>
        <th width="12%">Name</th>
      </tr>
      <tr>
        <td>Something</td>
        <td>3.375%</td>
        <td>$123.12</td>
        <td>1.125</td>
        <td>4,000</td>
        <td>Potato</td>
        <td>Paul</td>
      </tr>
      <tr>
        <td>Something Else</td>
        <td>2.750%</td>
        <td>$345.23</td>
        <td>5</td>
        <td>180</td>
        <td>Spaceship</td>
        <td>Skippy</td>
      </tr>
      <tr>
        <td colspan="7" class="sub">Subgroup Header</td> 
      </tr>
      <tr>
        <td>Another Thing</td>
        <td>3.375%</td>
        <td>$563.12</td>
        <td>222</td>
        <td>60</td>
        <td>Gym Shoe</td>
        <td>George</td>
      </tr>
      <tr>
        <td>Thing w/Less Stuff</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>Harmonica</td>
        <td>Helga</td>
      </tr>
      <tr>
        <td>Last Thing</td>
        <td></td>
        <td></td>
        <td></td>
        <td>4</td>
        <td>Meaning of Life</td>
        <td></td>
      </tr>
    </tbody>
  </table>

  <h2>Responsive</h2>

  <p>Use media queries to toggle the visibility of the original table and the stacktable (check out the stacktable.css example). You can pass in classes or an id to give to the stacktable. Adjust the size of your browser window to see it in action in the example below.</p>

  <pre>$('#responsive-example-table').stacktable({class:'your-class-name'});</pre>

  <table id="responsive-example-table" class="large-only" cellspacing="0">
    <tbody>
      <tr align="left">
        <th width="30%">Stuff</th>
        <th width="12%">Rate</th>
        <th width="12%">Amount</th>
        <th width="12%">Points</th>
        <th width="12%">Number</th>
        <th width="18%">Type</th>
        <th width="12%">Name</th>
      </tr>
      <tr>
        <td>Something</td>
        <td>3.375%</td>
        <td>$123.12</td>
        <td>1.125</td>
        <td>4,000</td>
        <td>Potato</td>
        <td>Paul</td>
      </tr>
      <tr>
        <td>Something Else</td>
        <td>2.750%</td>
        <td>$345.23</td>
        <td>5</td>
        <td>180</td>
        <td>Spaceship</td>
        <td>Skippy</td>
      </tr>
      <tr>
        <td colspan="7" class="sub">Subgroup Header</td> 
      </tr>
      <tr>
        <td>Another Thing</td>
        <td>3.375%</td>
        <td>$563.12</td>
        <td>222</td>
        <td>60</td>
        <td>Gym Shoe</td>
        <td>George</td>
      </tr>
      <tr>
        <td>Thing w/Less Stuff</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>Harmonica</td>
        <td>Helga</td>
      </tr>
      <tr>
        <td>Last Thing</td>
        <td></td>
        <td></td>
        <td></td>
        <td>4</td>
        <td>Meaning of Life</td>
        <td></td>
      </tr>
    </tbody>
  </table>

  <img src="resize.png" id="resize-graphic" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.1.min.js"><\/script>')</script> </script>

<script src="stacktable.js" type="text/javascript"></script>

<script>
  $(document).on('click', '#run', function(e) {
    e.preventDefault();
    $('#simple-example-table').stacktable({hideOriginal:true});
    $(this).replaceWith('<span>ran</span>');
  });
  $('#responsive-example-table').stacktable({class:'stacktable small-only'});
</script>

<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-2821890-9']);
    _gaq.push(['_trackPageview']);
    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>

</body>
</html>
